bitforum-frontend/app/(main)/(forum)/post/[id]/style.scss

#postView {
	position: relative;
	padding: 25px 32px 32px 32px;
	min-width: 270px;
	max-width: 1920px;
	margin: 0 auto;

	section {
		// 제목
		&.subject {
			font-size: 1.5rem;
			font-weight: 600;
			margin-bottom: 10px;
		}

		// 상단
		&.attribution {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;

			div:first-child {
				flex-grow: 0;
				padding-right: 20px;
			}

			div:last-child {
				display: grid;
				grid-template-columns: auto auto;
				grid-template-rows: repeat(2, 1fr);
				grid-template-areas: "writer-info post-date"
									 "post-info functions";
				align-items: center;
				flex-grow: 1;
				column-gap: 0;
				row-gap: 10px;

				article {
					&.writer-thumb {
						grid-area: writer-thumb;

						> img {
							width: 100%;
							max-width: 92px;
							object-fit: cover;
						}
					}

					&.writer-info {
						grid-area: writer-info;

						> ul {
							li {
								&:nth-of-type(2) {
									align-self: center;
									font-size: 0.875rem;
								}
							}
						}
					}

					&.post-info {
						grid-area: post-info;
					}

					&.post-date {
						grid-area: post-date;
						text-align: right;
					}

					&.functions {
						grid-area: functions;
						justify-self: flex-end;
					}

					> ul {
						display: flex;
						flex-wrap: wrap;
						column-gap: 10px;
						row-gap: 0;
						list-style: none;

						li {
							position: relative;

							// 가운데 점 추가
							&::after {
								content: '·';
								margin-left: 10px;
								color: var(--text-muted);
							}

							// 마지막 li는 점 숨김
							&:last-child::after {
								content: '';
								margin: 0;
							}

							a, button {
								color: var(--text-link);
								text-decoration: none;

								&:hover {
									text-decoration: underline;
									color: var(--text-link-hover);
								}
							}
						}
					}
				}
			}

			@media (max-width: 1140px) {
				div:last-child {
					grid-template-columns: auto 1fr;
					grid-template-rows: auto auto auto auto;
					grid-template-areas: "writer-thumb writer-info"
										 "writer-thumb post-info"
										 "writer-thumb post-date"
										 "writer-thumb functions";
					align-items: center;
					grid-auto-rows: auto;
					row-gap: 2px;
					column-gap: 0;

					article {
						&.post-date {
							text-align: left;
						}

						&.functions {
							justify-self: start;
							padding-top: 4px;
						}
					}
				}
			}
		}

		&.content {
			min-height: 300px;
			display: flex;
			flex-direction: column;

			article {
				font-size: 1.063rem;
				line-height: 1.25;

				// 본문 내용
				&:first-of-type {
					flex-grow: 1;

					// 첨부 파일
					section.file-embed {
						display: inline-block;
						width: max-content;
						max-width: 100%;
						padding: 5px 40px;
						border: 1px solid var(--border-strong);
						border-radius: 5px;
						background: var(--bg-elevated);
						margin: 5px 0;
						box-sizing: border-box;

						.file-icon svg {
							width: 19px;
							height: 19px;
							display: inline-block;
							vertical-align: sub;
							padding-right: 5px;
						}

						&.image-style-align-left {
							margin-left: 0;
							margin-right: auto;
						}

						&.image-style-align-center {
							display: block;
							margin-left: auto;
							margin-right: auto;
						}

						&.image-style-align-right {
							margin-left: auto;
							margin-right: 0;
						}

						&:hover {
							background-color: var(--bg-subtle);
							border-color: var(--text-link-hover);
							cursor: pointer;
						}
					}

					p a {
						color: var(--text-link);
						text-decoration: none;

						&:hover,
						&:focus {
							text-decoration: underline;
							color: var(--text-link-hover);
						}
					}
				}

				// 태그
				&:last-of-type {
					span {
						padding-right: 6px;

						a {
							color: var(--text-link);
							text-decoration: none;

							&:hover {
								text-decoration: underline;
								color: var(--text-link-hover);
							}
						}
					}
				}
			}
		}

		&.controls {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 0;

			article {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				gap: 7px;
			}
		}
	}

	hr {
		margin: 14px 0;
	}
}

// 인쇄 설정
@media print {
	body {
		/* 인쇄할 요소만 보이게 */
		#main, #container {
			visibility: visible;
			display: block;
			all: unset;
			width: 100%;
			height: auto;
			position: static;
			padding: 0;
			margin: 0 auto;
			overflow: visible;
		}

		#header, #ticker, #footer, #aside {
			display: none;
			visibility: hidden;
		}

		html, body {
			width: 100%;
			height: auto;
			overflow: visible;
		}
    }
}